<template>
  <div class="main">
      <div class="login">
            <!-- <span class="iconfont icon-arrow-left-bold arLeft" @click="$router.push('/recommend')"></span> -->
            <span class="iconfont icon-wyy wyy"></span>
          <!-- <h1>欢迎登录</h1> -->
          <div class="form">
              <div class="item">
                  <span class="iconfont icon-search"></span>
                  <input type="text" placeholder="手机号码" v-model="phone">
              </div>
              <div class="item">
                  <span class="iconfont icon-search"></span>
                  <input type="password" placeholder="密码" v-model="password">
              </div>
              <div class="item">
                  <span class="iconfont icon-search"></span>
                  <input type="text" placeholder="验证码" v-model="code">
                  <button class="getCode" @click="getCode">发送</button>
              </div>
              <div class="item">
                  <div class="submit" @click="submit">提交</div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import {getCaptchaSent,getLoginCellphone} from "../../api/login";
// import {getCaptchaSent,getCaptchaVerify,getLoginCellphone} from "../../api/login";

import { Toast } from 'vant'
export default {
    data(){
        return{
            phone:"",
            password:"",
            code:""
        }
    },
    methods:{
        getCode(){
            // 1.验证手机号码
            let reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if(!reg.test(this.phone)){
                Toast("请输入正确手机号码");
                return;
            }
            // 请求接口验证码
            getCaptchaSent({"phone":this.phone}).then(data=>{
                if(data.data){
                    Toast("验证码发送成功");
                }else{
                    Toast("验证码发送失败");
                }
            })
        },
        submit(){
            let regCode = /^[0-9]{4}$/;
            // 验证码
            if(!regCode.test(this.code)){
                console.log(this.code)
                Toast("请输入正确验证码");
                return;
            }
            // 1.验证手机号码
            let regPhone = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if(!regPhone.test(this.phone)){
                console.log(this.phone)
                Toast("请输入正确信息");
                return;
            }
            // 密码
            let regPassword = /^[a-zA-Z]\w{5,17}|\.$/;
            if(!regPassword.test(this.password)){
                console.log(this.password)
                Toast("请填写正确信息");
                return;
            }
            // getCaptchaVerify({"phone":this.phone,"captcha":this.code}).then(data=>{
            //     if(data.data){
                    getLoginCellphone({
                        phone:this.phone,
                        password:this.password
                    }).then(info=>{
                        console.log(info);
                        Toast("登陆成功");
                        // window.localStorage.setItem("login",info.cookie);
                        window.document.cookie = info.token;
                        window.localStorage.setItem("token",info.token);
                        window.localStorage.setItem("uid",info.account.id);
                        // 登录成功调回个人中心页面
                        // this.$router.push("/userInfo");
                        this.$router.push("/recommend");
                    })
            //     }else{
            //         Toast("请填写正确信息");
            //     }
            // }).catch(()=>{
            //     Toast("请填写正确信息")
            // })
        }
    }
}
</script>

<style lang="less">
    .main{
    height: 100%;
    padding: 0px;
}
.login{
        background-color: #d4473c;
        width: 100%;
        height: 100%;
        color:#fff;
        position: relative;
        .wyy{
            position: absolute;
            font-size: 100px;
            top:100px;
            left: 38%;
        }
    }
    h1{
        font-size: 48px;
        text-align: center;
        height: 48px;
    }
    .form{
        padding: 250px 0 40px 0;
        .item{
            width: 76%;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            background-color: #f47378;
            border-radius: 30px;
            margin-bottom: 12px;
            input{
                background-color: transparent;
                border:0px;
                outline: none;
                text-indent: 0.5em;
                font-size: 14px;
                color:#fff;
            }
            span{
                font-size: 20px;
                margin-left: 10px;
                display: inline-block;
                vertical-align: middle;
            }
            .getCode{
                border:1px solid #fff;
                height: 20px;
                line-height: 20px;
                width: 50px;
                border-radius: 20px;
                font-size: 12px;
                color:#808080;
                float: right;
                margin:5px;
            }
            .submit{
                font-size: 15px;
                background-color: #fff;
                text-align: center;
                color:#d4473c;
                border-radius: 15px;
            }
        }
    }

</style>